import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import * as actions from '../actions.js';
import styles from './style.css';

class Counter extends Component {
	render() {
		const {caption, value, delay, dispatch} = this.props;
		return (
			<p className={styles.style}>
			<span>{caption}</span>
			{' '}
			Clicked: {value} times
			{' '}
			<button onClick={() => dispatch(actions.increase(caption))}>+</button>
			{' '}
			<button onClick={() => dispatch(actions.decrease(caption))}>-</button>
			{' '}
			<button onClick={() => dispatch(actions.increaseIfOdd(caption))}>Increment if odd</button>
			{' '}
			<button onClick={() => dispatch(actions.increaseDelay(caption, delay))}>Increment async</button>
			</p>
		);
	}
}

Counter.defaultProps = {
	delay: 500
};

Counter.propTypes = {};

function mapStateToProps(state, ownProps) {
	return {
		value: state.counter[ownProps.caption]
	};
}

export default connect(mapStateToProps)(Counter);
			